<div class="intro">
    <p>This example shows how to use a `Dial` widget to animate an image sprite.</p>
    <p>Drag the `Dial` handle, or use the keyboard arrow keys to see the duck image "animate".</p>
</div>

<div class="example yui3-skin-sam">
    {{>duck-source}}
</div>

<h3>The Image Sprite</h3>
<p><img src="{{{componentAssets}}}/images/sprite_duck.jpg" width="676" height="33"/></p>

<h3>The Markup</h3>
<p>The `<div id="duck"></div>` element will have the sprite as its background-image.
<p>The `<div id="demo"></div>` element will contain the dial.</p>
<p></p>
{{>need-skin-note}}
```
<body class="yui3-skin-sam"> {{>need-skin-comment}}
```

```
    {{>duck-markup}}
```
<h3>The JavaScript</h3>
<p>The `stepsPerRevolution` attribute of the `Dial`
is given a value equal to the number of frames in the sprite.
</p>
<p>
On `valueChange` of the `dial`, the `background-position` of `<div id="duck">`
is changed to a new multiple of the
width of one frame in the sprite.
</p>
```
{{>duck-script}}
```
<h3>Complete Example Source</h3>
```
{{>duck-source}}
```

